<script setup lang="js">
    import { ElMessage } from "element-plus";
    import { ref, inject, defineProps, defineExpose, watch } from 'vue'
    import request from '../../request/axios'

    // 接收父组件参数
    const props = defineProps({
        popupType: {
            type: String,
            required: '0' // 0 新增知识库 1 编辑知识库 2 删除知识库 3 新增文件夹 4 编辑文件夹 5 删除文件夹
        },
        kId: {
            type: String,
            required: ''
        },
        knowledgeContent: {
            type: String,
            required: ''
        },
        knowledgeContents: {
            type: String,
            required: ''
        },
        fileObj: {
            type: Object,
            required: {}
        },
    });

    const fileMessage = inject('fileMessage')
    const addKnowledge = inject('addKnowledge') // 向父组件创建知识库
    const addKnowledgeMap = inject('addKnowledgeMap') // 向父组件创建知识库


    // 弹窗显示隐藏
    const popupBox = ref(false);
    const setPopupBox = () => {
        knowledgeName.value = '' // 清空输入框
        fileContent.value = '' // 清空输入框
        popupBox.value = !popupBox.value;
    }

    const knowledgeName = ref('');
    const fileContent = ref('');

    // 监听路由参数变化
    watch(
        () => props.knowledgeContent,
        () => {
            knowledgeName.value = props.knowledgeContent
        }
    )
    watch(
        () => props.knowledgeContents,
        () => {
            fileContent.value = props.knowledgeContents
        }
    )

    const editId = ref('')
    const setEditPopupBox = (row) => {
        editId.value = row.id
        fileContent.value = row.content
        knowledgeName.value = row.name
        popupBox.value = !popupBox.value;
    }

    // 新增知识库
    const addKnowledgesave = async () => {
        if (knowledgeName.value == '') return ElMessage.warning("请输入知识库名称");
        const data = {}
        data.name = knowledgeName.value
        data.content = fileContent.value
        setPopupBox()
        if (addKnowledgeMap) return addKnowledgeMap(data)
    }

    // 编辑知识库
    const updataKnowledge = async () => {
        if (knowledgeName.value == '') return ElMessage.warning("请输入知识库名称");
        try {
            const data = {}
            data.knowledge_id = props.kId
            data.name = knowledgeName.value
            const res = await request.postV2({ url: '/v1/api-knowledge-update', data })
            if (res.code == 200) {
                setPopupBox()
                ElMessage.success("修改成功");
                if (addKnowledge) return addKnowledge()
            }
        } catch (error) {
            console.log(error)
        }
    }

    // 删除知识库
    const delKnowledge = async () => {
        try {
            const data = {}
            data.knowledge_id = props.kId
            const res = await request.postV2({ url: '/v1/api-folder-del', data })
            if (res.code == 200) {
                setPopupBox()
                ElMessage.success("删除成功");
                if (addKnowledge) return addKnowledge()
            }
        } catch (error) {
            console.log(error)
        }
    }

    // 新增文件夹
    const addFileMessage = async () => {
        if (knowledgeName.value == '') return ElMessage.warning("请输入文件夹名称");
        try {
            const data = {}
            data.folder_id = props.fileObj.folder_id
            data.knowledge_id = props.fileObj.knowledge_id
            data.name = knowledgeName.value
            data.content = fileContent.value
            const res = await request.postV2({ url: '/v1/api-create-folder', data })
            if (res.code == 200) {
                setPopupBox()
                ElMessage.success("创建成功");
                if (fileMessage) return fileMessage()
            }
        } catch (error) {
            console.log(error)
        }
    }

    // 编辑文件夹
    const updataFileMessage = async () => {
        if (knowledgeName.value == '') return ElMessage.warning("请输入文件夹名称");
        try {
            const data = {}
            data.folder_id = editId.value
            data.content = fileContent.value
            data.name = knowledgeName.value
            const res = await request.postV2({ url: '/v1/api-folder-update', data })
            if (res.code == 200) {
                setPopupBox()
                ElMessage.success("修改成功");
                if (fileMessage) return fileMessage(data)
            }
        } catch (error) {
            console.log(error)
        }
    }

    // 删除文件夹
    const delFileMessage = async () => {
        try {
            const data = {}
            const apiUrl = props.fileObj.type == 1 ? '/v1/api-folder-del' : '/v1/api-del-file'
            if (props.fileObj.type == 1) {
                data.folder_id = props.fileObj.id
            } else {
                data.knowledge_file_id = props.fileObj.id
            }
            const res = await request.postV2({ url: apiUrl, data })
            if (res.code == 200) {
                setPopupBox()
                ElMessage.success("删除成功");
                if (fileMessage) return fileMessage()
            }
        } catch (error) {
            console.log(error)
        }
    }

    // 确定事件
    const clickKnowledgesave = async () => {
        console.log('2222222', props.popupType)
        switch (props.popupType) {
            case '0':
                addKnowledgesave();
                break;
            case '1':
                updataKnowledge();
                break;
            case '2':
                delKnowledge();
                break;
            case '3':
                addFileMessage();
                break;
            case '4':
                updataFileMessage();
                break;
            case '5':
                delFileMessage();
                break;
            default:
                ElMessage.warning("操作错误,请重试！");
                break;
        }
    }

    // 暴露方法给父组件
    defineExpose({
        setPopupBox, setEditPopupBox
    });
</script>

<template>
    <div class="popup-content" v-if="popupBox">
        <div class="popup-box">
            <div class="popup-title">提示</div>
            <div class="popup-add" style="margin-top: 10px;">
                <div v-if="props.popupType < 5 && props.popupType != 2" class="popup-tips">它的名字</div>
                <div v-if="props.popupType < 5 && props.popupType != 2" class="popup-input">
                    <img v-if="props.popupType <= 2" src="../../assets/image/icon/collection-icon.png" />
                    <img v-if="props.popupType > 2" src="../../assets/image/icon/collection-file.png" />
                    <el-input class="input-box" placeholder="请输入内容" v-model="knowledgeName" clearable />
                </div>
                <!-- <div class="popup-tips">索引模型</div>
                <div class="popup-elsect">
                    <el-select class="input-box" v-model="input" placeholder="请选择">
                        <el-option label="0" value="0" />
                        <el-option label="1" value="1" />
                        <el-option label="2" value="2" />
                    </el-select>
                </div>
                <div class="popup-tips">文本理解模型</div>
                <div class="popup-elsect">
                    <el-select class="input-box" v-model="input" placeholder="请选择">
                        <el-option label="0" value="0" />
                        <el-option label="1" value="1" />
                        <el-option label="2" value="2" />
                    </el-select>
                </div> -->
                <div class="popup-tips" v-if="props.popupType != 2 && props.popupType < 5">描述</div>
                <div class="popup-elsect" v-if="props.popupType != 2 && props.popupType < 5">
                    <el-input v-model="fileContent" :rows="3" type="textarea" placeholder="请输入描述" />
                </div>
                <div class="popup-tips" v-if="props.popupType == 2 || props.popupType == 5">确认删除该知识库？删除后数据无法恢复，请确认！
                </div>
                <div class="popup-btns">
                    <el-button class="btn" @click="()=> setPopupBox()">取消</el-button>
                    <el-button class="btn" @click="clickKnowledgesave"
                        style="color: #fff;background-color: #2D66B3;">确认</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
    .popup-content {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;

        .popup-box {
            width: 500px;
            padding: 20px;
            border-radius: 15px;
            background: #FFFFFF;
            box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.08);

            .popup-title {
                font-size: 18px;
                font-weight: bold;
                color: #000000;
                text-align: center;
            }

            .popup-add {
                font-size: 14px;
                color: #999999;

                .popup-tips {
                    font-size: 14px;
                    color: #999999;
                    margin: 10px 0;
                }

                .popup-input {
                    display: flex;
                    align-items: center;
                    margin-top: 4px;

                    img {
                        width: 30px;
                        height: 30px;
                        margin-right: 8px;
                    }
                }

                .popup-btns {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 20px;

                    .btn {
                        border-radius: 10px;
                        color: #2D66B3;
                        background: #FFFFFF;
                        border: 1px solid #2D66B3;
                        width: 140px;
                        height: 40px;
                        margin: 0 10px;

                    }
                }
            }
        }
    }
</style>